<!--
//
//  Derived from:
//  Copyright (c) 2011 Frank Kohlhepp
//  https://github.com/frankkohlhepp/fancy-settings
//  License: LGPL v2.1
//
//  Derived from:
//  Copyright (c) 2009, Google Inc.
//  Proxy Settings, a sample Google extension, by Mike West
//  http://code.google.com/chrome/extensions/samples.html
//  License: BSD
//
//  Copyright (c) 2011 Roy Six
//  http://code.google.com/p/urli/
//  License: LGPL v3.0
//
//  This file is part of urli.
//
//  urli is free software: you can redistribute it and/or modify
//  it under the terms of the GNU Lesser General Public License as published by
//  the Free Software Foundation, either version 3 of the License, or
//  (at your option) any later version.
//
//  urli is distributed in the hope that it will be useful,
//  but WITHOUT ANY WARRANTY; without even the implied warranty of
//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//  GNU Lesser General Public License for more details.
//
//  You should have received a copy of the GNU Lesser General Public License
//  along with urli.  If not, see <http://www.gnu.org/licenses/>.
//
-->

<!DOCTYPE HTML>

<html>

	<head>

		<title>urli Options</title>

		<!-- CSS -->

		<style>

			/* Body properties. */

			body {
				font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
				font-weight: normal;
				font-size: 28px;
				line-height: 40px;
				letter-spacing: -1px;
				color: #777777;
			}

			/* Sidebar properties (from fancy-settings). */

			div[id="sidebar"] {
				position: absolute;
				background-color: #EDECEB;
				background-image: linear-gradient(top, #EDECEB, #F5F5F5);
				background-image: -webkit-gradient(linear, left top, left 500, color-stop(0, #EDECEB), color-stop(1, #F5F5F5));
				background-image: -moz-linear-gradient(center top, #EDECEB 0%, #F5F5F5 100%);
				background-image: -o-linear-gradient(top, #EDECEB, #F5F5F5);
				width: 220px;
				top: 0;
				left: 0;
				bottom: 0;
				border-right: 1px solid #C2C2C2;
				box-shadow: inset -8px 0 30px -30px black;
			}

			/* urli Image properties (located down below, has an onClick). */

			input[type="image"] {
				position: absolute;
				bottom: 25px;
				left: 25px;
			}

			/* Text for the "Options" in the side bar.  Really don't like this is a div, but p makes it harder. */

			div#sidebarOptions {
				position: absolute;
				top: 18px;
				right: 25px;
			}

			/* Content. */

			div[id="content"] {
				position: absolute;
				top: 0;
				left: 221px;
				right: 0;
				bottom: 0;
				overflow: auto;
				margin-right: 15px;
			}

			/* Spacing of the fieldsets within the form (content). */

			form > fieldset {
				border-radius:  5px;
				border: 1px solid transparent;
				padding: 10px 10px 10px 30px;
				margin: 5px 0;
				-webkit-transition: all 0.5s ease;
			}

			/* Fieldset for dividing form elements */

			fieldset {
				border: 0;
				margin: 0;
				padding: 0;
				position: relative;
			}

			/* Header styling for our content. */

			div.header {
				float:left;
			}

			div.headerCheckbox {
				text-align:right;
			}

			hr {
				color: #FFFFFF;
				background-color: #FFFFFF;
				border: 1px dotted #DDDDDD;
				border-style: none none dotted;
			}

			/* Shortcut Keys div, for hiding/showing when option is enabled or disabled. */

			div#shortcutKeysOptions {
				display:none;
			}

			/* Paragraph properties. */

			p {
				line-height:normal;
				font-size: 14px;
				font-weight: normal;
			}

			/* Label properties. */

			label {
				line-height:normal;
				font-size: 14px;
				font-weight: normal;
			}

			/* Form buttons. */

			input[type="button"] {
				border-radius: 2px;
				box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
				-webkit-user-select: none;
				background: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
				border: 1px solid #AAA;
				color: #777;
				margin-bottom: 0;
				min-width: 4em;
				padding: 3px 12px;
				margin-top: 0;
				font-size: 1.1em;
			}

			div#formButtons {
				display:block;
				text-align:center;
				position:relative;
			}

			div#formButtons :hover {
				font-weight:bold;
			}

			/* Nice shadow property. */

			.shadow {
				text-shadow: -1px 0 #DDD, 0 1px #DDD, 1px 0 #DDD, 0 -1px #DDD;
			}

			/* Content that needs to float left and have content right of it. */

			.left {
				display: inline;
				margin-right:10px;
				float:left;
			}

			.right {
				position:relative;
				margin-left: 90px;
			}

			/* Overlay for generateAlert_() messages. */

			.overlay {
				display: block;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 350px;
				padding: 20px;
				margin: -80px 0 0 -195px;
				opacity: 0;
				background: rgba(0, 0, 0, 0.75);
				border-radius: 5px;
				color: #FFF;
				font: 1.5em/1.2 Helvetica Neue, Arial, Helvetica, sans-serif;
				-webkit-transition: all 1.0s ease;
			}

			.overlay a {
				color:  #FFF;
			}

			.overlay.visible {
				opacity: 1;
			}

			/* Prevents the user from being able to select DOM elements (used in body). */

			.no-select {
				cursor: default;
				user-select: none;
				-webkit-user-select: none;
				-moz-user-select: none;
				-o-user-select: none;
			}

		</style>

	</head>

	<!-- HTML -->

	<body class="no-select" onload="initOptions();">

		<div id="sidebar">

			<div id="sidebarOptions" class="shadow"></div>
			<input type="image" src="options.png" onClick="showUrliInfo(); return false;" />

		</div>

		<div id="content">

			<form>

				<fieldset>
					
					<div id ="headerShortcutKeys" class="header"></div>

					<div class="headerCheckbox">
						<input id="inputShortcutKeys" type="checkbox" onclick="toggleKeyOptions();" >
						<label id="labelShortcutKeys" for="inputShortcutKeys"></label>
					</div>

					<hr />

					<section>

						<div id="shortcutKeysOptions">

							<fieldset>

								<p id="pShortcutKeysDescription"></p>

								<div class="left">
									<label id="labelIncrement" for="inputIncrement" class="shadow"></label><br />
									<label id="labelDecrement" for="inputDecrement" class="shadow"></label>
								</div>

								<div class="right">
									<input id="inputIncrement" type="text" readonly="true" onkeydown="setIncrementKey();" ><br />
									<input id="inputDecrement" type="text" readonly="true" onkeydown="setDecrementKey();" >
								</div>

							</fieldset>

						</div>

					</section>

				</fieldset>

				<div id="formButtons">
					<input id="inputSave" type="button" onclick="wrapperSave();" >
					<input id="inputReset" type="button" onclick="wrapperReset();" >
				</div>

			</form>

		</div>

	</body>


	<script>

		// Global variables.

		var keyEnabled;
		var keyCodeIncrement;
		var keyEventIncrement;
		var keyCodeDecrement;
		var keyEventDecrement;

		// Called from body onload.

		function initOptions() {

			// i18n for mesages.json.

			document.getElementById("sidebarOptions").innerText = chrome.i18n.getMessage("optionsSidebarOptions");
			document.getElementById("headerShortcutKeys").innerText = chrome.i18n.getMessage("optionsHeaderShortcutKeys");
			document.getElementById("labelShortcutKeys").innerText = chrome.i18n.getMessage("optionsLabelShortcutKeys");
			document.getElementById("pShortcutKeysDescription").innerText = chrome.i18n.getMessage("optionsShortcutKeysDescription");
			document.getElementById("labelIncrement").innerText = chrome.i18n.getMessage("optionsLabelIncrement");
			document.getElementById("labelDecrement").innerText = chrome.i18n.getMessage("optionsLabelDecrement");
			document.getElementById("inputSave").value = chrome.i18n.getMessage("optionsInputSave");
			document.getElementById("inputReset").value = chrome.i18n.getMessage("optionsInputReset")

			// Load the saved data into the global variables by calling restoreOptions().

			restoreOptions();

			// Write to the form using the global variables.  parseInt is
			// necessary for the keyCodes because HTML 5's localStorage stores
			// the keyCodes as Strings, not integers.

			var inputShortcutKeys = document.getElementById("inputShortcutKeys");
			var inputIncrement = document.getElementById("inputIncrement");
			var inputDecrement = document.getElementById("inputDecrement");

			inputShortcutKeys.checked = keyEnabled == 1 ? true : false;
			writeToText(inputIncrement, keyEventIncrement, parseInt(keyCodeIncrement));
			writeToText(inputDecrement, keyEventDecrement, parseInt(keyCodeDecrement));

			// Show or hide the key options (depends on state of keyEnabled).

			toggleKeyOptions();
		}

		// Restores the options from localStorage.

		function restoreOptions() {

			// Get the keyEnabled, key codes, and key events from localStorage.

			keyEnabled = localStorage["keyEnabled"];
			keyCodeIncrement = localStorage["keyCodeIncrement"];
			keyEventIncrement = localStorage["keyEventIncrement"];
			keyCodeDecrement = localStorage["keyCodeDecrement"];
			keyEventDecrement = localStorage["keyEventDecrement"];
		}

		// Wrapper function to save options (called when Save button is clicked).

		function wrapperSave() {
			if (saveOptions()) {
				generateAlert_(chrome.i18n.getMessage("optionsSuccessfulSave"), false);
			}
		}

		// Wrapper function to reset options (called when Reset button is clicked).

		function wrapperReset() {
			resetOptions();
			if (saveOptions()) {
				generateAlert_(chrome.i18n.getMessage("optionsSuccessfulReset"), false);
			}
		}

		// Saves options to localStorage.

		function saveOptions() {

			// If the user decides to set the exact same keys for both increment
			// and decrement do not allow them to save.

			if ((keyEventIncrement == keyEventDecrement) && (keyCodeIncrement == keyCodeDecrement)) {
				generateAlert_(chrome.i18n.getMessage("optionsErrorShortcutKeys"), false);
				return false;
			}

			// Save the form data into localStorage.

			localStorage["keyEnabled"] = keyEnabled;
			localStorage["keyCodeIncrement"] = keyCodeIncrement;
			localStorage["keyEventIncrement"] = keyEventIncrement;
			localStorage["keyCodeDecrement"] = keyCodeDecrement;
			localStorage["keyEventDecrement"] = keyEventDecrement;

			// Let the background page know the options were saved/updated.

			chrome.extension.sendRequest({greeting: "onOptionsFormSave"}, function(){});

			return true;
		}

		// Resets options to defaults.

		function resetOptions() {

			var inputShortcutKeys = document.getElementById("inputShortcutKeys");
			var inputIncrement = document.getElementById("inputIncrement");
			var inputDecrement = document.getElementById("inputDecrement");

			// Reset the global variables to defaults.

			keyEnabled = "1";
			keyCodeIncrement = 38;
			keyEventIncrement = " Ctrl";
			keyCodeDecrement = 40;
			keyEventDecrement = " Ctrl";

			// Write to the form using the global variables.  parseInt is
			// necessary for the keyCodes because HTML 5's localStorage stores
			// the keyCodes as Strings, not integers.

			inputShortcutKeys.checked = keyEnabled == 1 ? true : false;
			writeToText(inputIncrement, keyEventIncrement, keyCodeIncrement);
			writeToText(inputDecrement, keyEventDecrement, keyCodeDecrement);

			// Called at update of keyEnabled checkbox value to either show or
			// hide the key options.

			toggleKeyOptions();
		}

		// Sets the increment keys when the user enters a key in the Increment
		// input text.

		function setIncrementKey(e) {

			var keyCode;
			var keyEvent;
			var text;

			// Detect the keyCode and keyEvent (multi-browser).

			if (window.event) {
				keyCode = window.event.keyCode;
			} else if (e) {
				keyCode = e.which;
			}
			keyEvent = e || window.event;

			// Stores the keyCode in the global variable to be saved later.
			// Get the appropriate textbox (increment).

			keyCodeIncrement = keyCode;
			text = document.getElementById("inputIncrement");

			// Change the textbox to read what the user entered.
			// Store the keyEvent type:  Alt, Ctrl, Shift, NONE (" ") in
			// keyEventIncrement.

			if (keyEvent.altKey) {
				keyEventIncrement = " Alt";
			}
			else if (keyEvent.ctrlKey) {
				keyEventIncrement = " Ctrl";
			}
			else if (keyEvent.shiftKey) {
				keyEventIncrement = " Shift";
			}
			else {
				keyEventIncrement = " ";
			}
			writeToText(text, keyEventIncrement, keyCode);
		}

		// Sets the decrement keys when the user enters a key in the Decrement
		// input text.

		function setDecrementKey(e) {

			var keyCode;
			var keyEvent;
			var text;

			// Detect the keyCode and keyEvent (multi-browser).

			if (window.event) {
				keyCode = window.event.keyCode;
			} else if (e) {
				keyCode = e.which;
			}
			keyEvent = e || window.event;

			// Stores the keyCode in the global variable to be saved later.
			// Get the appropriate textbox (decrement).

			keyCodeDecrement = keyCode;
			text = document.getElementById("inputDecrement");

			// Change the textbox to read what the user entered.
			// Store the keyEvent type:  Alt, Ctrl, Shift, NONE (" ") in
			// keyEventDecrement.

			if(keyEvent.altKey) {
				keyEventDecrement = " Alt";
			}
			else if (keyEvent.ctrlKey) {
				keyEventDecrement = " Ctrl";
			}
			else if (keyEvent.shiftKey) {
				keyEventDecrement = " Shift";
			}
			else {
				keyEventDecrement = " ";
			}
			writeToText(text, keyEventDecrement, keyCode);
		}

		// This function writes to the textbox.  Because the fromCharCode
		// function doesn't store strings for arrow and some other keys, they
		// must be manually stringified.  (All other keyCodes will use
		// fromCharCode in the default case to display their contents.)

		function writeToText(text, keyEvent, keyCode) {
			switch (keyCode) {
				case 8:
					text.value = keyEvent == " " ? (keyEvent + "Backspace") : (keyEvent + " + " + "Backspace");
					break;
				case 9:
					text.value = keyEvent == " " ? (keyEvent + "Tab") : (keyEvent + " + " + "Tab");
					break;
				case 13:
					text.value = keyEvent == " " ? (keyEvent + "Enter") : (keyEvent + " + " + "Enter");
					break;
				case 16:
					text.value = keyEvent == " " ? (keyEvent + "Shift") : (keyEvent + " + " + "Shift");
					break;
				case 17:
					text.value = keyEvent == " " ? (keyEvent + "Ctrl") : (keyEvent + " + " + "Ctrl");
					break;
				case 18:
					text.value = keyEvent == " " ? (keyEvent + "Alt") : (keyEvent + " + " + "Alt");
					break;
				case 37:
					text.value = keyEvent == " " ? (keyEvent + "Left") : (keyEvent + " + " + "Left");
					break;
				case 38:
					text.value = keyEvent == " " ? (keyEvent + "Up") : (keyEvent + " + " + "Up");
					break;
				case 39:
					text.value = keyEvent == " " ? (keyEvent + "Right") : (keyEvent + " + " + "Right");
					break;
				case 40:
					text.value = keyEvent == " " ? (keyEvent + "Down") : (keyEvent + " + " + "Down");
					break;
				default:
					text.value = keyEvent == " " ? (keyEvent + String.fromCharCode(keyCode)) : (keyEvent + " + " + String.fromCharCode(keyCode));
					break;
			}
		}

		// Called at options initialization or every time the checkbox for
		// Shortcut Keys is clicked to toggle the key options from being shown
		// or hidden.

		function toggleKeyOptions() {

			var shortcutKeysOptions = document.getElementById("shortcutKeysOptions");
			var inputShortcutKeys = document.getElementById("inputShortcutKeys");

			if (inputShortcutKeys.checked == true) {
				keyEnabled = 1;
				shortcutKeysOptions.style.display = "block";
			}
			else if (inputShortcutKeys.checked == false) {
				keyEnabled = 0;
				shortcutKeysOptions.style.display = "none";
			}
		}

		// Shows some information about urli (called when urli image is clicked).

		function showUrliInfo() {
			generateAlert_(chrome.i18n.getMessage("optionsUrliInfo"), false);
		}

		// Generate alert overlay (popup message).
		// From the sample Google extension, Proxy Settings by Mike West.

		function generateAlert_(msg, close) {
			var success = document.createElement('div');
			success.classList.add('overlay');
			success.setAttribute('role', 'alert');
			success.textContent = msg;
			document.body.appendChild(success);

			setTimeout(function() { success.classList.add('visible'); }, 10);
			setTimeout(function() {
			if (close === false) {
				// success.classList.remove('visible');
				document.body.removeChild(success);
			} else
				window.close();
			}, 3000);
		}

	</script>

</html>
